<template>
  <div>
    <h1>App</h1>

    <hr />

    <ul>
      <TreeItem v-for="item in tree" :data="item" />
    </ul>

    <hr />

    <ul>
      <li v-for="item in tree">
        <p>{{ item.name }}</p>
        <ul>
          <li v-for="item in item.children">
            <p>{{ item.name }}</p>
            <ul>
              <li v-for="item in item.children">
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import TreeItem from "./components/TreeItem.vue";

export default {
  components: {
    TreeItem,
  },

  data() {
    return {
      tree: [
        {
          name: "菜单1",
          children: [
            {
              name: "菜单1-1",
            },
            {
              name: "菜单1-2",
              children: [
                {
                  name: "菜单1-2-1",
                  children: [
                    {
                      name: "菜单1-2-1-1",
                      children: [
                        {
                          name: "菜单1-2-1-1-1",
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          name: "菜单2",
          children: [
            {
              name: "菜单2-1",
            },
            {
              name: "菜单2-2",
            },
          ],
        },
      ],
    };
  },
};
</script>
